﻿@model Website.Models.Product

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Template.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.zoom-min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.productDetails .images .mainImage img')
        .wrap('<span style="display:block; height: 100%;"></span>')
        .css('display', 'block')
        .parent()
        .zoom();

        $('.productDetails .images .subImages .subImage img').click(function () {
            var newSrc = $(this).attr('src');
            $('.productDetails .images .mainImage img').attr('src', newSrc);
        });
    });
</script>
@*<div class="currentPath">
    <a href="#">Trang Chủ</a> > <a href="#">Thời Trang Nữ</a> > <a href="#">Váy</a>
</div>*@
<div class="productDetails">
    <div class="images">
        <div class="mainImage">
            <img src="@Url.Content(@Model.MainImage)" alt="@Model.ProductCode"/>    
        </div>
        <div class="subImages">
            <div class="subImage">
                <img src="@Url.Content(@Model.MainImage)" alt="@Model.ProductCode"/>
            </div>
            @if(!string.IsNullOrEmpty(Model.SubImage1))
            {
                <div class="subImage">
                    <img src="@Url.Content(@Model.SubImage1)" alt="@Model.ProductCode"/>    
                </div>    
            }
            @if(!string.IsNullOrEmpty(Model.SubImage2))
            {
                <div class="subImage">
                    <img src="@Url.Content(@Model.SubImage2)" alt="@Model.ProductCode"/>    
                </div>    
            }
            @if(!string.IsNullOrEmpty(Model.SubImage3))
            {
                <div class="subImage">
                    <img src="@Url.Content(@Model.SubImage3)" alt="@Model.ProductCode"/>    
                </div>    
            }
        </div>
    </div>
    <div class="info">
        <div class="mainInfo">
            <p class="productCode">Mã sản phẩm: <span>@Model.ProductCode</span></p>
            @if(@Model.Category.Code != "PK")
            {
                <p class="size">Size: <span>S - M - L</span></p>
            }
            <p class="price">Giá: <span>@(Model.Price.HasValue ? Model.Price.Value.ToString("#,##0") : Model.PriceLevel.Price.ToString("#,##0")) VND</span></p>
            <p class="status">Tình trạng: <span>Còn hàng</span></p>
            @if(!string.IsNullOrEmpty(Model.Desc))
            {
                <p class="desc">Mô tả SP: <span>@Model.Desc</span></p>
            }
        </div>
        @*<div class="relateProducts">
            <div class="relateProduct">
                <img src="../../Content/Images/1.jpg" /></div>
            <div class="relateProduct">
                <img src="../../Content/Images/2.jpg" /></div>
            <div class="relateProduct">
                <img src="../../Content/Images/3.jpg" /></div>
            <div class="relateProduct">
                <img src="../../Content/Images/4.jpg" /></div>
        </div>*@
    </div>
</div>
